import React, { memo,useContext } from 'react'
import { ThemeContext, UserContext } from './context';

const App = memo(() => {
  // 使用useContext获取上下文
  const userContext = useContext(UserContext);
  const themeContext = useContext(ThemeContext);
  return (
    <div>
      <h1>App</h1>
      <p>
        user: {userContext.name} age: {userContext.age}
      </p>
      <div>
        theme: 
        <p style={{color:themeContext.theme}}>{themeContext.theme}</p>
         size:
        <p style={{fontSize:themeContext.size}}> {themeContext.size}</p>
      </div>
    </div>
  )
})

export default App
